<template>
	<div class="quality-record">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>检验记录</span>
					<div class="header-actions">
						<el-button type="primary" size="small" @click="openDialog('add')">新增记录</el-button>
						<el-button size="small" @click="exportCSV">导出</el-button>
					</div>
				</div>
			</template>

			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="计划编号">
					<el-input v-model="filters.planCode" />
				</el-form-item>
				<el-form-item label="任务编号">
					<el-input v-model="filters.taskCode" />
				</el-form-item>
				<el-form-item label="时间范围">
					<el-date-picker v-model="filters.range" type="daterange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary">搜索</el-button>
					<el-button @click="reset">重置</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="filteredList" border stripe>
				<el-table-column prop="planCode" label="计划编号" width="120" />
				<el-table-column prop="taskCode" label="任务编号" width="120" />
				<el-table-column prop="batch" label="建材批次" />
				<el-table-column prop="result" label="检验结果" width="100">
					<template #default="scope">
						<el-tag :type="scope.row.result === 'NG' ? 'danger' : 'success'">{{ scope.row.result }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="检验时间" width="160" />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeRecord(scope.$index)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>
		</el-card>
		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="计划编号">
					<el-input v-model="form.planCode" />
				</el-form-item>
				<el-form-item label="任务编号">
					<el-input v-model="form.taskCode" />
				</el-form-item>
				<el-form-item label="建材批次">
					<el-input v-model="form.batch" />
				</el-form-item>
				<el-form-item label="检验结果">
					<el-select v-model="form.result">
						<el-option label="OK" value="OK" />
						<el-option label="NG" value="NG" />
					</el-select>
				</el-form-item>
				<el-form-item label="检验时间">
					<el-date-picker v-model="form.time" type="datetime" style="width: 100%" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>

	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({})
const currentIndex = ref(-1)

const openDialog = (type, row) => {
	dialogTitle.value = type === 'add' ? '新增检验记录' : '编辑检验记录'
	dialogVisible.value = true
	if (type === 'edit') {
		form.value = { ...row }
		currentIndex.value = list.value.findIndex(i => i.planCode === row.planCode && i.taskCode === row.taskCode)
	} else {
		form.value = {
			planCode: '', taskCode: '', batch: '', result: 'OK',
			time: dayjs().format('YYYY-MM-DD HH:mm')
		}
		currentIndex.value = -1
	}
}

const submitForm = () => {
	const data = { ...form.value, time: dayjs(form.value.time).format('YYYY-MM-DD HH:mm') }
	if (currentIndex.value >= 0) {
		list.value[currentIndex.value] = data
	} else {
		list.value.push(data)
	}
	dialogVisible.value = false
}

const removeRecord = (index) => {
	list.value.splice(index, 1)
}


const list = ref([
	...Array.from({ length: 10 }).map((_, i) => ({
		planCode: `P20250${i + 1}`,
		taskCode: `T20250${i + 1}`,
		batch: `BATCH-00${i + 1}`,
		result: i % 4 === 0 ? 'NG' : 'OK',
		time: dayjs().subtract(i, 'day').format('YYYY-MM-DD HH:mm')
	}))
])

const filters = ref({ planCode: '', taskCode: '', range: '' })

const filteredList = computed(() => {
	return list.value.filter(item => {
		const f = filters.value
		return [
			!f.planCode || item.planCode.includes(f.planCode),
			!f.taskCode || item.taskCode.includes(f.taskCode),
			!f.range || (dayjs(item.time).isAfter(f.range[0]) && dayjs(item.time).isBefore(f.range[1]))
		].every(Boolean)
	})
})

const reset = () => {
	filters.value = { planCode: '', taskCode: '', range: '' }
}

const exportCSV = () => {
	const rows = filteredList.value.map(item => [
		item.planCode,
		item.taskCode,
		item.batch,
		item.result,
		item.time
	])
	const header = ['计划编号', '任务编号', '建材批次', '检验结果', '检验时间']
	const csvContent = [header, ...rows].map(e => e.join(',')).join('\n')
	const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' })
	const link = document.createElement('a')
	link.href = URL.createObjectURL(blob)
	link.download = '检验记录.csv'
	link.click()
}
</script>

<style scoped>
.quality-record {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}

.header-actions {
	display: flex;
	gap: 8px;
	/* 控制按钮间距 */
}

/* 保持原有其他样式 */
.quality-record {
	padding: 20px;
}
</style>
